<template>
	<view>
		<view class="cart-del" v-show="isShowManage">
			<view class="left">
				<label @click="selAll()">
					<checkbox value="cb" :checked="isAll" style="transform:scale(0.7)" /> 全选
				</label>
			</view>
			<view class="right">
				<button class="mini-btn" type="warn" size="mini" plain="true" @click="delCartsByIds()">删除</button>
				<button class="mini-btn" type="info" size="mini" plain="true" @click="switchManage()" style="margin-left:20px;">取消</button>
			</view>
		</view>
		<view class="list">
			<checkbox-group @change="changeCheckbox" v-if="cartList.length > 0">
				<label class="item" v-for="(item,index) in cartList" @longtap="onLongPress(item.id,index)">
					<view class="left" v-show="isShowManage">
						<checkbox :value="item.id.toString()" color="#005DFF" :checked="item.checked"
							style="transform:scale(0.7)" />
					</view>
					<view class="right">
						<view class="goods-name">{{item.goodsName}}</view>
						
						<view class="goods-price">
							<view class="remark">{{item.remark}}</view>
							<view class="price"><text>¥</text> {{item.goodsPrice}}</view>
							<view class="num" @click.stop="">
								<view class="left">
									<uni-icons type="minus" size="25" @click="minusCart(item.id,index)">
									</uni-icons>
								</view>
								<view class="center">{{item.goodsNum}}</view>
								<view class="right">
									<uni-icons type="plus-filled" size="25" @click="plusCart(item.id,index)">
									</uni-icons>
								</view>
							</view>
						</view>
					</view>
				</label>
			</checkbox-group>
			<view class="empty-cart" v-else>
				<view class="image">
					<image :src="Config.OSS_HOST+'/static/gouwuche.png'"></image>
				</view>
				<view class="empty">菜单空空如也~</view>
			</view>
		</view>
		
		<view class="total-money" v-if="cartList.length > 0">
			合计：<text style="font-weight:bold; margin-right:5px; color:#F00;">{{cartTotalMoney}}</text> 元
		</view>
		
	</view>
</template>

<script>
	import { ShoppingCartApi } from '@/api/food/ShoppingCartApi'

	export default {
		data() {
			return {
				Config: this.$Config,
				Common: this.$Common,
				Auth: this.$Auth,
				ShareUtil: this.$ShareUtil,
				State: this.$store.state,
				Dict: this.$Dict,

				cartList: [],
				cartTotalMoney: 0.00,
				changeCartIds: [],
				isShowManage: false,
				isAll: false,
				allIdArr: []
			}
		},
		onLoad() {
			let that = this

			that.initPage()
		},
		onPullDownRefresh() {
			this.getCartList()
		},
		onNavigationBarButtonTap() {
		    this.switchManage()
		},
		methods: {
			initPage() {
				this.getCartList()
			},
			getCartList() {
                ShoppingCartApi.getList().then((response) => {
					response.forEach(item => {
						item = this.Common.showGoodsPrice(item)
					})

					this.cartList = response

					this.cartList.forEach(item => {
						this.allIdArr.push(item.id)
					})

					this.calcCartTotalMoney()
				})
			},
			switchManage() {
                this.isShowManage = !this.isShowManage
			},
			selAll() {
				this.isAll = !this.isAll

				this.cartList.forEach(item => {
					item.checked = this.isAll
				})

                this.changeCartIds = this.isAll ? this.allIdArr : []
            },
			changeCheckbox(e) {
				this.changeCartIds = e.detail.value
				this.calcCartTotalMoney()
			},
			calcCartTotalMoney() {
				this.cartTotalMoney = 0
				this.cartList.forEach(item => {
					this.cartTotalMoney += item.goodsNum * item.goodsPrice
				})
			},
			plusCart(id, index) {
                ShoppingCartApi.plus(id).then((response) => {
					this.cartList[index].goodsNum++
					this.calcCartTotalMoney()
				})
			},

			minusCart(id, index) {
                ShoppingCartApi.minus(id).then((response) => {
					let goodsNum = this.cartList[index].goodsNum - 1
					if (goodsNum > 0) {
						this.cartList[index].goodsNum = goodsNum
					} else {
						this.cartList.splice(index, 1)
					}
					this.calcCartTotalMoney()
				})
			},
			delCartsByIds() {
				let that = this

				if (that.changeCartIds.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return false
				}

				uni.showModal({
					title: '提示',
					content: '确认删除所选商品吗？',
					success: function(res) {
						if (res.confirm) {
                            ShoppingCartApi.delCartByIds(that.changeCartIds).then((response) => {
								that.getCartList()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.cart-del {
		height: 50px;
		line-height: 50px;
		// position: fixed;
		left: 0px;
		// #ifdef H5
		top: 44px;
		// #endif
		// #ifdef APP-PLUS
		top: 0px;
		// #endif
		display: flex;
		width: 100%;
		border-top: 1px solid #EEE;
		background-color: #FFF;
		z-index: 9;
	}
	.cart-del .left {
		flex: 1;
		padding-left: 20px;
	}
	.cart-del .right {
		flex: 1;
		padding-right: 20px;
		text-align: right;
		padding-top: 6px;
	}
	.cart-del .right button {
		line-height: 12px;
		padding: 5px 10px;
	}
	.list {
		padding: 20px 20px 20px 20px;
	}
	.list .item {
		border-bottom: 1px solid #EEE;
		padding-bottom: 10px;
		margin-bottom: 10px;
		display: flex;
		width: 100%;
		align-items: center;
		/* center代表水平方向 */
		justify-content: center;
		/* center代表垂直方向 */
	}
	.list .item>.left {
		width: 40px;
		flex-direction: column;
	}
	.list .item .right {
		flex: 1;
	}
	.list .item .goods-name {
		line-height: 20px;
		font-size: 18px;
	}
	.list .item .goods-price {
		display: flex;
	}
	.list .goods-price .remark {
		flex:1;
		align-self: center;
		font-size: 14px;
		color:#D00;
	}
	.list .goods-price .price {
		width: 60px;
		align-self: center;
		font-size: 14px;
	}
	.list .goods-price .num {
		width: 80px;
		display: flex;
	}
	.list .num .left .uni-icons {
		color: #999 !important;
	}
	.list .num .center {
		width: 30px;
		text-align: center;
		line-height: 26px;
	}
	.list .num .right .uni-icons {
		color: #FB503C !important;
	}
	.cart-btn {
		width: 92%;
		height: 50px;
		line-height: 50px;
		position: fixed;
		z-index: 999;
		left: 4%;
		bottom: 15px;
		display: flex;
	}
	.cart-btn .left {
		flex: 2;
		background-color: #333333;
		border-radius: 7px 0px 0px 7px;
		color: #FFF;
		padding-left: 20px;
	}
	.cart-btn .left text {
		font-size: 18px;
	}
	.cart-btn .right {
		flex: 1;
		background-color: #FB503C;
		border-radius: 0 7px 7px 0;
		text-align: center;
		color: #FFF;
	}
	.cart-goods {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 998;
		left: 0px;
		top: 0px;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.cart-goods .box {
		width: 100%;
		position: absolute;
		left: 0px;
		bottom: 0px;
		background-color: #FFF;
		border-radius: 15px 10px 0 0;
	}
	.cart-goods .box .title {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: right;
		display: block;
		padding-right: 10px;
		border-bottom: 1px solid #EEE;
	}
	.cart-goods .box .list {
		padding: 10px 10px 80px 10px;
	}
	.cart-goods .item {
		border-bottom: 1px solid #EEE;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	.cart-goods .item .goods-name {
		line-height: 30px;
	}
	.cart-goods .item .goods-price {
		display: flex;
	}
	.cart-goods .goods-price .price {
		flex: 1;
	}
	.cart-goods .goods-price .num {
		width: 100px;
		display: flex;
	}
	.cart-goods .num .center {
		width: 30px;
		text-align: center;
	}
	.cart-goods .num .uni-icons {
		color: #FB503C !important;
	}
	.empty-cart .image {
		text-align: center;
		margin: 100px auto 0 auto;
	}
	.empty-cart .image image {
		width: 100px;
		height: 100px;
	}
	.empty-cart .empty {
		text-align: center;
		color: #999;
	}
	.total-money{
		width:100%; height:44px; line-height:44px; text-align:right; padding-right:40rpx;
	}
</style>
